<template>
  <div class="third mt-1">
    <div class="warning-title mb-2">销售明细</div>
    <div class="px-1">
      <el-table
        :data="tableData" 
        class="customer-table"
        size="small" 
        :header-cell-style="{
          background: 'rgba(0, 86, 251, .2)',
          fontSize: getRealPX(12)+'px',
        }"
        style="
          width: 100%;
          background: transparent;
          text-algin: center;
        "
        :max-height="getRealPX(400)"
      >
        <el-table-column  type="index" prop="month" label="月份" align="center"  >
        </el-table-column>
        <el-table-column label="销量(吨)" align="center">
          <el-table-column prop="tlCount" label="铁路运输" align="center"  >
            <template slot-scope="{row}">{{0}}</template>
          </el-table-column>
          <el-table-column prop="glCount" label="公路运输" align="center"  >
          </el-table-column>
          <el-table-column label="合计" align="center"  >
            <template slot-scope="scope">
              <div style="color: #fedf7a">{{scope.row.glCount }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column prop="ydl" label="用电量" align="center"  >
        </el-table-column> -->
        <el-table-column label="纳税(万元)" align="center">
          <el-table-column prop="zzs" label="增值税" align="center"  >
          </el-table-column>
          <el-table-column prop="zys" label="资源税" align="center"  >
          </el-table-column>
          <el-table-column prop="qysds" label="其他税" align="center"  >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>

import companyApi from "@/api/company/index";
export default {
  name: "companyThird",
  components: {},
  data() {
    return {
      tableData: [
         
      ], 
    };
  },
  methods:{
    getxssjzs() {
      let that = this;
      companyApi
        .dataThird({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.tableData = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted(){
    this.getxssjzs()
  },
};
</script>
<style lang="stylus" scoped>
.px-1 {
  width: 581px;
  height: 430px;
}

.third {
  width: 581px;
  height: 530px;
  background: url('../../../assets/img/company/bg03.png') no-repeat;
  background-size: 581px 530px;
}

/deep/.el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 16px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/deep/.el-table tr, .el-table td {
  color: #e5dada;
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/, /deep/.el-table tr.data-row {
  background: rgba(0, 204, 255, 0.2);
}

/deep/.el-table tr.dataone-row {
  // background: block;
}

/deep/.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  color: rgba(0, 204, 255, 1);
  font-size: 12px;
  font-weight: 400;
}

// 去掉表格单元格边框
/deep/.customer-table th {
  border: 1px solid #00E4FF;
}

/deep/.customer-table td, .customer-table th.is-leaf {
  border: 1px solid #00E4FF;
  // border-top: 0;
}

// 表格最外边框
/deep/.el-table--border, .el-table--group {
  border: 1px solid #00E4FF;
}

// 头部边框
/deep/.customer-table thead tr th.is-leaf {
  border: 1px solid #00E4FF;
  border-right: none;
}

/deep/.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid rgba(0, 86, 251, 0.2);
}

// 表格最外层边框-底部边框
/deep/.el-table--border::after, .el-table--group::after {
  width: 0;
}

/deep/.customer-table::before {
  width: 0;
}

/deep/.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
  width: 0;
}

// 表格有滚动时表格头边框
// /deep/.el-table--border th.gutter:last-of-type {
//   border: 1px solid rgba(0, 86, 251, 0.2);
//   border-left: none;
// }
</style>
